<template>
	<div>
		<div id="wangeditor" class="text"> </div>
	</div>
</template>
<script>
import E from 'wangeditor';
import { uploadFile } from '@/utils/tool.js';
export default {
	props: {
		wordage: {
			require: false,
			type: String,
			default: () => ''
		},
		showDetail: {
			type: Boolean,
			default: () => false,
			required: true
		},
		uploadConfig: {
			type: Object,
			required: true,
			default: () => {}
		}
	},
	data() {
		return {
			editor: null,
			editorData: '',
			imageData: null,
			linkImgData: null
		};
	},
	mounted() {
		this.imageData = new Map();
		this.linkImgData = new Map();
		this.initWangeDitor();
		this.editor.txt.html(this.wordage);
	},
	methods: {
		initWangeDitor() {
			this.editor = new E('#wangeditor');
			this.editor.config.placeholder = '可输入富文本，字数上限为1500中文字符';
			this.editor.config.height = 260;
			// 配置 图片上传的地址
			this.editor.config.uploadImgServer = this.uploadConfig.url;
			this.editor.config.uploadImgHeaders = this.uploadConfig.headers;
			this.editor.config.customUploadImg = (resultFiles, insertImgFn) => {
				console.log('resultFiles', resultFiles);
				console.log('insertImgFn', insertImgFn);
				// resultFiles 是 input 中选中的文件列表
				// insertImgFn 是获取图片 url 后，插入到编辑器的方法
				resultFiles.forEach(async item => {
					try {
						let data = await uploadFile(item);
						this.imageData.set(data.url, data);
						console.log(data);
						insertImgFn(data.url);
					} catch (error) {
						console.error('uploadFile error:', error);
						if (error.code === 'ECONNABORTED') {
							this.$message.error('上传超时！');
						} else {
							this.$message.error('上传失败！');
						}
						
					}

				});
				console.log(this.imageData);
			};
			// 插入网络图片的回调
			this.editor.config.linkImgCallback = (src, alt) => {
				let data = { url: src, name: alt, size: 0 };
				console.log(data);
				this.linkImgData.set(data.url, data);
			};
			// 配置菜单栏，设置需要的功能
			this.editor.config.menus = [
				'head', //标题
				'bold', // 粗体
				'fontSize', // 字号
				'fontName', // 字体
				'italic', // 斜体
				'underline', // 下划线
				'strikeThrough', // 删除线
				'indent', //缩进
				'lineHeight', //行高
				'foreColor', // 文字颜色
				'backColor', // 背景颜色
				'justify', // 对齐方式
				'quote', // 引用
				'image', // 插入图片
				'emoticon', // 表情
				'table', //表格
				'splitLine' //分割线
			];
			// 忽略粘贴内容中的图片
			this.editor.config.pasteIgnoreImg = true;
			// 配置全屏功能按钮是否展示
			this.editor.config.showFullScreen = false;
			// 配置 onchange 回调函数，将数据同步到 vue 中
			this.editor.config.onchange = newHtml => {
				this.editorData = newHtml.replace(/href="[^"]*"/gi, 'href="#"');
				console.log(this.editorData, 'editorData');
				this.$emit('onChange', this.editorData, this.editor.txt.text());
			};
			this.editor.config.pasteTextHandle = pasteStr => {
				// 对粘贴的文本进行处理，然后返回处理后的结果
				return pasteStr;
			};
			this.editor.config.pasteFilterStyle = false;
			this.editor.create();
			// 配置业务场景详情按钮不开点击
			if (this.showDetail) {
				this.editor.disable();
			} else {
				this.editor.enable();
			}
		}
	}
};
</script>
<style lang="less">
#wangeditor {
	.w-e-toolbar {
		padding-right: 20px;
	}
	a {
		color: #606266;
	}
	.w-e-text-container p > img {
		cursor: default;
		display: inline !important;
		max-height: 260px !important;
		min-height: 20px;
		min-width: 20px;
	}
}
</style>
